<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <grid-icon :list="iconList" style="padding: 10px 0"></grid-icon>

    <div class="ui-title">自定义列数</div>
    <grid-icon :list="iconList" style="padding: 10px 0" :column="4"></grid-icon>

    <div class="ui-title">自定义行数</div>
    <grid-icon :list="iconList" style="padding: 10px 0" :row="2"></grid-icon>

    <div class="ui-title">按钮描述</div>
    <grid-icon :list="iconList2" style="padding: 10px 0"></grid-icon>
  </div>
</template>

<script>
import GridIcon from "../../components/grid-icon";
export default {
  components: {
    GridIcon
  },
  data() {
    return {
      iconList: [
        {
          name: '潮流服饰',
          icon: 'https://www.qiniu.lingchen.kim/daka.png',
        },{
          name: '附近超市',
          icon: 'https://www.qiniu.lingchen.kim/yaoqing.png',
        },{
          name: '免费水果',
          icon: 'https://www.qiniu.lingchen.kim/youjian.png',
        },{
          name: '借钱',
          icon: 'https://www.qiniu.lingchen.kim/yiduyoujian.png',
        },{
          name: '生活缴费',
          icon: 'https://www.qiniu.lingchen.kim/shuoming.png',
        },{
          name: '爱回收',
          icon: 'https://www.qiniu.lingchen.kim/tonggao.png',
        },{
          name: '天天国际',
          icon: 'https://www.qiniu.lingchen.kim/xinjian.png',
        },{
          name: '宠物',
          icon: 'https://www.qiniu.lingchen.kim/tixian.png',
        },{
          name: '寄件服务',
          icon: 'https://www.qiniu.lingchen.kim/shoucang.png',
        },{
          name: '更多频道',
          icon: 'https://www.qiniu.lingchen.kim/rili.png',
        },
      ],
      iconList2: [
        {
          name: '附近超市',
          icon: 'https://www.qiniu.lingchen.kim/yaoqing.png',
          brief: '简单介绍'
        },{
          name: '潮流服饰',
          icon: 'https://www.qiniu.lingchen.kim/shipin.png',
          brief: '简单介绍'
        },{
          name: '免费水果',
          icon: 'https://www.qiniu.lingchen.kim/youjian.png',
          brief: '简单介绍'
        },{
          name: '借钱',
          icon: 'https://www.qiniu.lingchen.kim/yiduyoujian.png',
          brief: '简单介绍'
        }
      ]
    };
  },
  methods: {},
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 20px;
  justify-content: space-between;

  // 自定义图标上下间距
  // /deep/ .grid-icon {

  //   .container {
  //     margin-top: -20px !important;
  //   }

  //   .item {
  //     margin-top: 20px !important;
  //   }
  // }
}
</style>